import { View } from '@tarojs/components';
import { getCurrentInstance, useDidShow } from '@tarojs/taro';
import { getOrderStatus }  from '@/subPages/order/utils';
import { useState, useRef } from 'react';
import { getOrderListInfo } from '@/service/apis/order';
import EmptyContent from '@/components/EmptyContent';
import { AtTabs, AtTabsPane } from 'taro-ui';
import AppointItem from './component/AppointItem';
import './style.scss';

/**
 * 我的预约服务列表
 * @returns
 */
const AppointList = () => {
  const allList: any = useRef();
  const [current, setCurrent] = useState(0);
  const { router } = getCurrentInstance();
  const [list, setList] = useState<any>(null);
  const tabList = [
    { title: '全部', value: 0 },
    { title: '待线上付款', value: 1 },
    { title: '待服务', value: 2 },
    { title: '已完成', value: 3 },
    { title: '已关闭', value: 4 },
  ];

  useDidShow(() => {
    init();
  });

  const init = async () => {
    const { appoint_status } = router?.params || {};
    const { data } = await getOrderListInfo({ type: 2 });
    const newList = data?.list.map((item) => {
      return {
        ...item,
        orderStatus: getOrderStatus(item.order_status),
      };
    });
    allList.current = newList;
    onTabChange(Number(appoint_status));
    setList(data.list);
  };

  // 切换tab
  const onTabChange = (value: number) => {
    setCurrent(value);
    if (value === 0) {
      setList(allList.current);
      return;
    }
    const _currentList = allList.current.filter((item: any) => {
      return item.orderStatus === value;
    });
    setList(_currentList);
  };

  return (
    <View className="order-liast-container">
      <AtTabs scroll current={current} tabList={tabList} onClick={onTabChange}>
        {tabList.map((tab, index) => {
          return (
            <AtTabsPane key={tab.value} current={current} index={index}>
              <View className="product-list">
                {list?.map((goods: any) => {
                  return <AppointItem key={goods.id} orderInfo={goods} />;
                })}
                {list?.length === 0 && <EmptyContent />}
              </View>
            </AtTabsPane>
          );
        })}
      </AtTabs>
    </View>
  );
};
export default AppointList;
